<template>
	<view style="margin: 10px 10px 0px 10px;">
		<u-form labelPosition="left">
			<u-form-item labelWidth="100" label="手机号码" borderBottom>
				<view><u-input v-model="profile.phone" border="none" type="number" inputAlign="right" :clearable="true"></u-input></view>
			</u-form-item>

			<u-form-item labelWidth="100" label="验证码" borderBottom>
				<view><u-input v-model="profile.captcha" type="number" border="none" inputAlign="left" :clearable="true"></u-input></view>
				<view slot="right"><u-button :disabled="disabled" type="success" size="mini" :text="btnTxt" @click="sendCaptcha" ></u-button></view>
			</u-form-item>
		</u-form>
		<view name="底部按钮" style="margin: 20px 0px 0px 0px;"><u-button type="primary" :loading="loading" text="提交" @click="save"></u-button></view>
	</view>
</template>

<script>
import { SexOpts, DefaultHead, Toast } from '@/utils/common.js';
import { IMG_SERVER, Request, VITE_API_URL } from '@/utils/request.js';
import { User } from '@/utils/user.js';
export default {
	data() {
		return {
			leftTime:60,
			disabled:false,
			btnTxt:"获取验证码",
			profile: {
				phone: '',
				captcha: ''
			}
		};
	},
	onLoad() {
		let _ = this;
		uni.$on('emitParams', data => {});
		console.log('setting页面显示...');
		this.loadProfile();
	},
	methods: {
		//发送验证码
		sendCaptcha(){
			let _ = this;
			 if(_.leftTime == 60 && _.disabled==false){
				 if(!_.profile.phone){
					 Toast.error("填写手机");
					 return;
				 }
				 //可以发送
				 Toast.loadingT("发送中...");
				 Request.post("/api/sms/captcha/send?phone="+_.profile.phone,{}).then((res)=>{
					 Toast.success("已发送");
					 let timer = setInterval(()=>{
						 _.disabled = true;
						 if(_.leftTime >0){
							 _.leftTime = _.leftTime - 1;
							 _.btnTxt = _.leftTime + "秒";
						 }else{
							 _.disabled = false;
							 _.leftTime = 60;
							 _.btnTxt = "获取验证码";
							 clearInterval(timer);
						 }
					 },1000);
				 }).catch((res)=>{
					 Toast.error("发送失败");
				 });
			 }
		},
		//加载个人信息
		loadProfile() {
			let _ = this;
			User.getProfile().then(res => {
				let profile = res;
				profile.sexTxt = _.sexTxt(profile.sex);
				profile.birthday = profile.birthday == null ? '' : dayjs(profile.birthday).format('YYYY-MM-DD');
				profile.img = IMG_SERVER + profile.avatar;
				console.log('profile is ', profile);
				_.profile = profile;
			});
		},
		//保存
		save(){
			let _ = this;
			Toast.loadingT("提交中...");
			User.bindPhone(_.profile.phone,_.profile.captcha).then((res)=>{
				Toast.hideLoading();
				Toast.success("绑定成功");
			});
		},
	}
};
</script>

<style></style>
